<#include "/common/include.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="新增菜单"/>
<@addorEdit fromId="form-menu-add">
        <input id="treeId" name="parentId" type="hidden" value="${menu.menuId}" />
        <div class="form-group">
            <label class="col-sm-3 control-label "><@ctx.i18n text = "上级菜单"/>：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" type="text" onclick="selectMenuTree()" id="treeName" readonly="true" value="${menu.name}">
                    <span class="input-group-btn"><a  href="javascript:selectMenuTree();" class="btn btn-default"><i class="fa fa-fw fa-search"></i></a></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "菜单类型"/>：</label>
            <div class="col-sm-8">
                <#list dict.getType('sys_menu_type')>
                    <#items as d>
                        <#if d.status =='0' >
                            <label class="radio-box"><input type="radio" name="type" value="${d.dictValue}" <#if d.isDefault =='Y'>checked</#if>><@ctx.i18n text = "${d.dictLabel}"/></label>
                        </#if>
                    </#items>
                </#list>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "菜单名称"/>：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="name" id="name" required>
            </div>
        </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "所属模块"/>：</label>
        <div class="col-sm-8">
                <#list modules>
                    <#items as d>
                        <#if d.status =='0' >
                            <label>
                                <label class="check-box"><input type="checkbox" name="moduleCodes" value="${d.moduleCode}" required/><@ctx.i18n text = "${d.moduleName}" /></label>
                            </label>
                        </#if>
                    </#items>
                </#list>
        </div>
    </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "请求地址"/>：</label>
            <div class="col-sm-8">
                <input id="url" name="url" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "目标"/>：
                <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom"
                   data-content="菜单已什么形式打开">
                    <i class="fa fa-question-circle-o" style="color: orange"></i></a>
            </label>
            <div class="col-sm-8">
                <select id="target" name="target" class="form-control">
                    <#list dict.getType('sys_menu_target')>
                        <#items as d>
                            <#if d.status =='0' >
                                <option value="${d.dictValue}" <#if d.isDefault =='Y' >selected="selected"</#if>><@ctx.i18n text = "${d.dictLabel}"/></option>
                            </#if>
                        </#items>
                    </#list>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "权限标识"/>：
<#--                <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="<@ctx.i18n text = "权限标识"/>"-->
<#--                   data-content='控制器中定义的权限标识，如：<#noparse><@shiro.hasPermission name="sys:menu:add"></@shiro.hasPermission></#noparse>'><i class="fa fa-question-circle-o" style="color: orange"></i></a>-->
            </label>
            <div class="col-sm-8">
                <input id="perms" name="perms" class="form-control" type="text">
                <span class="help-block m-b-none"><i class="fa fa-info-circle" style="color: red"></i>控制器中定义的权限标识，如：<#noparse><@shiro.hasPermission name="sys:menu:add"></#noparse></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "排序"/>：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "图标"/>：
                <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="bottom"
                   data-content="自定义获取图标:<a href='http://www.fontawesome.com.cn/faicons/' target='_blank'>http://www.fontawesome.com.cn/faicons/</a>">
                    <i class="fa fa-question-circle-o" style="color: orange"></i></a>
            </label>
            <div class="col-sm-8">
                <div class="input-group">
                    <span class="input-group-addon"><i id="menuIconIcon" class="fa fa-fw"></i></span>
                    <input id="menuIcon" name="icon"  type="text" value="" class="form-control" placeholder="选择图标" >
                    <span class="input-group-btn"><a id="menuIconButton" href="javascript:" class="btn btn-default"><i class="fa fa-fw fa-search"></i></a></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"><@ctx.i18n text = "菜单状态"/>：</label>
            <div class="col-sm-8">
                <#list dict.getType('sys_show_hide')>
                    <#items as d>
                        <div class="radio-box">
                            <input type="radio" id="${d.dictCode}" name="hide" value="${d.dictValue}"
                                   <#if d.isDefault =='Y' >checked</#if>>
                            <label for="${d.dictCode}"><@ctx.i18n text = "${d.dictLabel}"/></label>
                        </div>
                    </#items>
                </#list>
            </div>
        </div>
</@addorEdit>
<@footer>
<script>

    var prefix = baseURL + "sys/menu";

    $("#form-menu-add").validate({
        onkeyup: false,
        rules:{
            menuType:{
                required:true,
            },
            name:{
                remote: {
                    url: prefix + "/checkMenuNameUnique",
                    type: "POST",
                    dataType: "html",
                    data: {
                        "parentId": function() {
                            return $("input[name='parentId']").val();
                        },
                        "name" : function() {
                            return opt.common.trim($("#name").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return opt.validate.unique(data);
                    }
                }
            },
            orderNum:{
                digits:true
            },
        },
        messages: {
            "name": {
                remote: "菜单已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if (opt.validate.form()) {
            var data;
            if($('input[name="type"]:checked').val() === "1"){
                var options = {
                    id:'form-menu-add',
                    del:['moduleCodes']/*需要删除提交表单数据*/
                };
                data = opt.form.dataUp(options);
            }else if($('input[name="type"]:checked').val() === "0"){
                var options = {
                    id:'form-menu-add',
                    del:['perms','url','target','moduleCodes']/*需要删除提交表单数据*/
                };
                data = opt.form.dataUp(options);
            }else{
                var options = {
                    id:'form-menu-add',
                    del:['url','target','icon','moduleCodes']/*需要删除提交表单数据*/
                };
                data = opt.form.dataUp(options);
            }
            var moduleCodes = "";
            $('input[name="moduleCodes"]:checked').each(function () {
                moduleCodes += $(this).val() + ",";
            });
            moduleCodes = moduleCodes.substring(0,moduleCodes.length-1);
            data.push({"name": "moduleCodes", "value": moduleCodes});
            opt.operate.save(prefix + "/add", data);
        }
    }

    $(function() {
    	
        $("#menuIconButton").click(function(){
            var options = {
                url: prefix+'/iconSelect?value='+$("#menuIcon").val(),
                title:'<@ctx.i18n text = "图标选择"/>',
                callBack: doIconSubmit
            };
            opt.modal.openMainWin(options);
        });

        $('input[name="type"]').on('ifChecked', function(event){
            var menuType = $(event.target).val();
                if (menuType == "0") {
                    $("#url").parents(".form-group").hide();
                    $("#perms").parents(".form-group").hide();
                    $("#menuIcon").parents(".form-group").show();
                    $("#target").parents(".form-group").hide();
                    $("input[name='visible']").parents(".form-group").show();
                } else if (menuType == "1") {
                    $("#url").parents(".form-group").show();
                    $("#perms").parents(".form-group").show();
                    $("#menuIcon").parents(".form-group").show();
                    $("#target").parents(".form-group").show();
                    $("input[name='hide']").parents(".form-group").show();
                } else if (menuType == "2") {
                    $("#url").parents(".form-group").hide();
                    $("#perms").parents(".form-group").show();
                    $("#menuIcon").parents(".form-group").hide();
                    $("#target").parents(".form-group").hide();
                    $("input[name='hide']").parents(".form-group").show();
                }
        });
    });

    /*菜单管理-新增-选择菜单树*/
    function selectMenuTree() {
        var treeId = $("#treeId").val();
        var menuId = treeId > 0 ? treeId : 1;
        var url = prefix + "/selectMenuTree/" + menuId;
        var options = {
            title: '菜单选择',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        opt.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);
    }

    function doIconSubmit(index, layero,_layer){
        var body = _layer.getChildFrame('body', index);
        var icon = body.find('#icon').val();
        $("#menuIconIcon").attr("class",'fa fa-fw '+icon);
        $("#menuIcon").val(icon).change();
        _layer.close(index);
    }
</script>
</@footer>
</@pageTheme>